<template>
	<custom-page title="门店助教" borderBottomColor="transparent" backgroundColor="#F9F9F9">
		<template #page>
			<view class="page-content">
				<view class="search-layout">
					<view class="input-row">
						<image class="search-img" :src="asserts.ic_search"></image>
						<input class="input-content" placeholder="请输入助教名称查找" v-model="name"/>
						<view class="btn-search" @click="searchClick">搜索</view>
					</view>
				</view>
				<view class="filter-layout">
					<picker @change="sortFilterChange" :range="sortFilterData.map((e) => e.text)" mode="selector" class="filter-item" v-if="false">
						<view class="filter-item">
							<image class="left-icon" :src="ftpUrl + '/ic_index_sort.png'"></image>
							<view class="filter-title" :class="(practiceStateIndex!=-1)?'.col_01c':'col_585'">{{(practiceStateIndex!=-1)?sortFilterData[practiceStateIndex].text:'综合排序'}}</view>
							<image class="right-img" :src="ftpUrl + '/ic_triangle_bottom_normal.png'"></image>
						</view>
					</picker>
					<picker @change="leveSelectChange" :range="(leaveListData.map((e) => e.grade))" mode="selector" class="filter-item">
						<view class="filter-item">
							<image class="left-icon" :src="ftpUrl + '/ic_index_leave.png'"></image>
							<view class="filter-title" :class="(leaveIndex!=-1)?'.col_01c':'col_585'">{{(leaveIndex!=-1)?leaveListData[leaveIndex].grade:'全部等级'}}</view>
							<image class="right-img" :src="ftpUrl + '/ic_triangle_bottom_normal.png'"></image>
						</view>
					</picker>
					<view class="filter-item" @click="onlySeeOnline">
						<image class="left-icon" :src="ftpUrl + '/ic_online.png'"></image>
						<view class="filter-title" :class="(orderReceivingState)?'.col_01c':'col_585'">只看在线</view>
					</view>
				</view>
				<common-list-view ref="assistantList" class="list-view" :enableLoadMore="true" :enableRefresh="true"
					@listinit="onListInit($event)" :hasNoDataHolder="true">
					<template #content='{datas}'>
						<view class="assistant-list-grid">
							<assistant-list-item-tow v-for="(item, index) in datas" :itemData="item" @itemClick="assistantClick(item)"></assistant-list-item-tow>
						</view>
					</template>
				</common-list-view>
			</view>
		</template>
	</custom-page>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				sortFilterData: [
					{
						text: '综合排序',
						code: '101'
					},
					{
						text: '服务优先',
						code: '102'
					},
					{
						text: '价格优先',
						code: '103'
					},
					{
						text: '距离优先',
						code: '104'
					},
					{
						text: '年龄优先',
						code: '105'
					},
					{
						text: '价格从低到高',
						code: '106'
					},
					{
						text: '价格从高到低',
						code: '107'
					},
				],
				practiceStateIndex: -1,
				leaveListData: [],
				leaveIndex: -1,
				orderReceivingState: '',
				pollId: '',
			}
		},
		computed: {
			getSortType(){
				if(this.practiceStateIndex != -1){
					return this.sortFilterData[this.practiceStateIndex].code
				}else{
					return ''
				}
			},
			
			getGradeId(){
				if(this.leaveListData && this.leaveListData.length>0 && this.leaveIndex != -1){
					return this.leaveListData[this.leaveIndex].id
				}else{
					return ''
				}
			},
			
		},
		onLoad(val) {
			this.pollId = val.pollId
			this.getGradeList()
		},
		methods: {
			//列表加载
			onListInit(event){
				event.target.loadPageData = ({start, pageSize, showLoading = false}) => {
					let params = {
						current: start,
						pageSize: pageSize,
						name: this.name,
						sortType: this.getSortType,		//综合排序
						gradeId: this.getGradeId,
						orderReceivingState: this.orderReceivingState,
						pollId: this.pollId,
					}
					return this.requestCenter.getAssistantPageList(params)
					.then(res => {
						return Promise.resolve({ 
							curPage: start,
							pageCount: res.pages || 1,
							datas: res.records || []
						})
					})
				}
			},
			
			refreshList(){
				this.$refs.assistantList.triggerLoadData({start: 1, showLoading: true})
			},
			
			//助教等级列表
			getGradeList(){
				this.requestCenter.getGradeList().then(res => {
					this.leaveListData = res
				})
			},
			
			//点击搜索
			searchClick(){
				this.refreshList()
			},
			
			//综合筛选
			sortFilterChange(e){
				let index = e.detail.value
				this.practiceStateIndex = index
				this.refreshList()
			},
			
			//助教等级
			leveSelectChange(e){
				let index = e.detail.value
				this.leaveIndex = index
				this.refreshList()
			},
			
			//点击只看在线
			onlySeeOnline(){
				if(this.orderReceivingState == '1'){
					this.orderReceivingState = ''
				}else{
					this.orderReceivingState = '1'
				}
				this.refreshList()
			},
			
			//助教点击
			assistantClick(item){
				uni.navigateTo({
					url: `/pages/assistant-detaill/assistant-detaill?userId=${item.userId}`
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page-content{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.list-view{
		flex: 1;
		overflow: hidden;
	}
	.search-layout{
		display: flex;
		flex-direction: row;
		padding: 12rpx 32rpx;
		box-sizing: border-box;
		background-color: white;
		.input-row{
			width: 100%;
			height: 72rpx;
			background: #F9F9F9;
			border-radius: 36rpx 36rpx 36rpx 36rpx;
			border: 2rpx solid #F5F5F5;
			display: flex;
			flex-direction: row;
			align-items: center;
			.search-img{
				width: 32rpx;
				height: 32rpx;
				margin-left: 32rpx;
				margin-right: 16rpx;
			}
			.input-content{
				flex: 1;
				font-size: 28rpx;
				height: 100%;
			}
			.btn-search{
				width: 128rpx;
				height: 72rpx;
				line-height: 72rpx;
				background: #01CBFF;
				border-radius: 36rpx 36rpx 36rpx 36rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}
	}
	.filter-layout{
		width: 100%;
		display: flex;
		flex-direction: row;
		height: 88rpx;
		background-color: white;
		.filter-item{
			flex: 1;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			.left-icon{
				width: 28rpx;
				height: 28rpx;
			}
			.filter-title{
				font-size: 24rpx;
				color: #585F70;
				margin: 0 16rpx;
			}
			.col_585{
				color: #585F70;
			}
			.col_01c{
				color: #01CBFF;
			}
			.right-img{
				width: 12rpx;
				height: 8rpx;
			}
		}
	}
	.assistant-list-grid{
		width: calc(100% - 32rpx);
		margin: 0 16rpx;
		display: grid;
		grid-template-columns: repeat(2, 49%);
		column-gap: 16rpx;
		row-gap: 16rpx;
		padding-top: 16rpx;
		box-sizing: border-box;
	}
</style>
